<template>
  <el-card>
    <el-button type="primary" @click="handle('')">添加</el-button>
  </el-card>
  <el-table :data="tableList.data">
    <el-table-column lable="名称" prop="name" />
    <el-table-column lable="年龄" prop="age" />
    <el-table-column lable="操作">
      <template #default="{ row, $index }">
        <el-button type="text" @click="handle(row, $index)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { addDialog } from "@/components/gDialog"
import { reactive, shallowRef } from "vue"
import addUser from "./modal/addUser.vue"

interface IUser {
  name: string
  age: string
}

interface ITableI {
  data: IUser[]
}

const tableList: ITableI = reactive({ data: [] })
const handle = (row: any, index?: number) => {
  console.log(row)
  addDialog({
    title: "添加用户",
    component: shallowRef(addUser),
    width: "400px",
    props: {
      row
    },
    callBack: (isAdd: Boolean, data: IUser) => {
      if (isAdd) {
        addData(data)
      } else {
        tableList.data[index as number] = data
      }
      console.log(data, "data")
    }
  })
}
const addData = (data: IUser) => {
  tableList.data.push(data)
}
</script>

<style></style>
